<!DOCTYPE html>
<html>
<head>
  <style>
    div.outer
    {
      width:50px;
      height:50px;
      background-color:yellow;
      transform-origin:100% 100%;
      /* Rotate div */
      transform:skew(30deg) rotate(90deg);
      -ms-transform:rotate(9deg); /* Internet Explorer */
      -moz-transform:rotate(9deg); /* Firefox */
      -webkit-transform:rotate(60deg) skew(20deg);  /* Safari 和 Chrome */
      -o-transform:rotate(90deg); /* Opera */
      overflow:hidden;
    }
    div.inner{
      width:100px;
      height:100px;
      background-color:red;
      text-align:center;
      transform:skew(-20deg) rotate(-55deg);
      /*opacity:0.2;*/
      border-radius:50%
    }
  </style>
</head>
<body>
<div style="position:fixed;width:100px;height:100px;background-color:green;padding:20px;">
  <div class="outer">
    <div class="inner">hello world</div>
  </div>
</div>


</body>
</html>
